What is HTML?
1. HTML Basics
Definition
HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It describes the structure of a webpage using various elements and tags.
Key Aspects of HTML
1. Markup Language: HTML is a markup language used to annotate and structure content for display in web browsers. It organizes text and multimedia for web pages.
2. Elements and Tags: HTML elements are building blocks of web pages. They are enclosed by tags. For example, the <p> tag is used for paragraphs, and <h1> to <h6> tags are used for headings.
3. Structure of a Webpage: HTML documents start with <!DOCTYPE html> and contain <html> with <head> for metadata and <body> for the visible content.
4. Hyperlinks: HTML uses the <a> (anchor) tag to create hyperlinks that connect web pages.
Example
<!DOCTYPE html>
<html>
<head><title>Page Title</title></head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. HTML Elements
Definition
HTML elements are the building blocks of HTML. They define the structure and content of the webpage. Each element consists of a tag, attributes, and the content between the tags.
Key Components of an HTML Element
1. Tags : Tags define the start and end of an element. For example, <p> starts a paragraph, and </p> ends it.
2. Attributes: Attributes provide extra information about an element, such as its class, ID, or the source of an image. They are written inside the opening tag.
Example: <img src="image.jpg" alt="Image description" width="500">
- src: Specifies the image file path.
- alt: Alternative text if the image isn't displayed.
- width: Defines the width of the image.
3. Content: The content of an element is the text or media displayed inside the tags. For example, in a paragraph, the content is the text between <p> and </p>.
Example
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="#">This is a link</a>
3. HTML Forms
Definition
HTML forms are used to collect user input and submit data to a server for processing. Forms use input elements such as text fields, radio buttons, and checkboxes.
1. Form Structure
- The <form> element is used to create an HTML form. It serves as a container for form elements such as input fields, labels, and buttons.
- The action attribute specifies the URL to which the form data is submitted, and the method attribute defines how the data is sent (commonly GET or POST).
2. Input Elements
- Various <input> types are used to collect different types of user data. Some common input types include:
• Text Fields: <input type="text"> is used to collect single-line text input from the user.
• Passwords: <input type="password"> hides the entered text for security.
• Email: <input type="email"> validates the user’s input as a properly formatted email address.
• Radio Buttons: <input type="radio"> allows the user to select one option from a set of choices.
• Checkboxes: <input type="checkbox"> allows users to select multiple options from a list.
• Date/Time: <input type="date">, <input type="time">, and <input type="datetime-local"> collect date and time information.
- Each <input> field can have attributes such as name, value, placeholder, and required to further customize the form fields.
3. Labels
- The <label> element is used to provide descriptive text for form inputs. When associated with an <input> element using the for attribute, clicking the label will focus on the corresponding input field.
4. Select Dropdowns
- The <select> element is used to create a dropdown list where users can choose one or more options.
- Each option within the <select> dropdown is defined by the <option> tag.
5. Text Areas
- The <textarea> element is used to collect multi-line text input from the user, such as comments or descriptions.
- Unlike <input> elements, <textarea> does not have a value attribute. Instead, the text entered by the user is placed between the opening and closing <textarea> tags.
6. Buttons
- Forms typically include a submit button (<button type="submit">) to send the data to the server for processing.
- Other types of buttons include <button type="reset"> (to clear the form fields) and <button type="button"> (for custom behavior triggered by JavaScript).
7. Form Validation
- HTML5 introduces built-in form validation features, allowing developers to enforce certain rules for input fields.
- For example, the required attribute ensures that the user cannot submit the form without filling out certain fields.
- Other validation attributes include min, max, pattern, and maxlength.
8. Data Submission
- When the form is submitted, the browser sends the user’s input as name/value pairs to the server.
- The GET method appends the data to the URL, making it visible in the address bar. The POST method sends the data in the body of the HTTP request, which is generally more secure for sensitive information.
Example
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
4. HTML Tables
Definition
1. Table Structure
- HTML tables are created using the <table> element, which serves as the container for the rows and columns.
- A table consists of multiple rows, created with the <tr> (table row) tag. Each row can contain data cells, which are defined using the <td> (table data) tag.
2. Table Headers
- The <th> tag is used to define table headers, which are typically placed at the top of the table to describe the content of each column.
- Headers are styled differently from normal data cells, often bolded and centered by default in most browsers.
3. Rows (<tr>)
- The <tr> element defines a table row. Each row consists of multiple <td> or <th> elements.
- Rows group related data together, allowing users to compare data across columns more easily.
4. Columns (<td> and <th>)
- Each <td> (table data) element represents a single cell within a table row. It holds the actual data content, such as text or numerical values.
- The <th> (table header) element defines a header cell. These cells typically provide labels for the columns or rows and are often styled differently from regular data cells.
5. Table Head, Body, and Footer
- HTML tables can be divided into three sections: <thead>, <tbody>, and <tfoot>.
- The <thead> element groups the header content, <tbody> groups the main body of data, and <tfoot> contains any footer content, such as totals or summaries.
6. Border and Spacing
- By default, tables do not display borders between cells. However, borders can be added using the border attribute or through CSS styling.
- Cell spacing and padding can also be controlled to improve the table’s readability and layout.
7. Accessibility
- For accessibility, it's important to include clear <th> elements and properly label tables using captions or summaries.
- Use the scope attribute on <th> elements to define whether the header applies to a row, column, or group of rows/columns.
Example
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>30</td></tr>
</table>
5. HTML Media
Definition
HTML allows embedding various types of media such as images, audio, and video. Media elements include <img>, <audio>, and <video>.
1. Images (<img>)
- The <img> tag is used to display images within an HTML document. It requires a src attribute to specify the image file location and an alt attribute for alternative text.
- Images can be displayed in various formats such as JPEG, PNG, GIF, or SVG.
- The alt attribute provides text descriptions for images, which helps with accessibility and SEO.
2. Audio (<audio>)
- The <audio> element allows embedding sound files. Audio files can be played directly on the webpage with user controls or can autoplay.
- Supported file types include MP3, WAV, and OGG.
- Key attributes include controls (to display audio controls), autoplay (to start playing automatically), loop (for continuous playback), and muted (to mute the audio).
- Multiple <source> elements can be used inside the <audio> tag to provide different formats for browser compatibility.
3. Video (<video>)
- The <video> tag is used to embed video files. It allows users to play, pause, and control video playback directly on the webpage.
- Supported formats include MP4, WebM, and OGG.
- Key attributes include controls (for video playback controls), autoplay (for automatic video playback), loop (for continuous playback), and poster (to display an image before the video starts).
- Similar to the <audio> tag, multiple <source> elements can be provided to support different file types for different browsers.
4. File Compatibility
- Different browsers may support different media file formats. It is important to include multiple <source> tags for both audio and video elements to ensure compatibility across all major browsers.
5. Accessibility
- For both <img> and media elements, ensuring proper alternative text (for images) and captions (for video/audio) is crucial for accessibility.
- Providing textual descriptions of non-text content (like images and videos) makes the page more accessible to visually impaired users and enhances the overall user experience.
6. Responsive Media
- While embedding media, it's essential to consider responsive design to ensure that images, audio, and video scale properly across devices like desktops, tablets, and smartphones.
7. SEO Benefits
- Embedding media, especially images with well-defined alt text, can improve a webpage's SEO by providing context to search engines about the content.
8. Bandwidth Considerations
- While embedding high-quality media enhances user experience, it can also impact page load times. It's recommended to optimize images, audio, and video for the web to reduce file size and load times.
Example
<img src="image.jpg" alt="Image Description">
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<video controls><source src="video.mp4" type="video/mp4"></video>
CSS Introduction
Definition
CSS (Cascading Style Sheets) is a language used to style HTML documents. It allows developers to control the layout, colors, fonts, and overall design of a web page.
What is CSS?
CSS is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS allows for a consistent design across web pages.
CSS Demo - One HTML Page - Multiple Styles!
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
Why Use CSS?
CSS separates content from design, making maintenance easier and allowing for flexible, responsive designs across different devices.
Example
<!DOCTYPE html>
<html>
<head><title>CSS Demo</title></head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>